import React, { Component } from 'react';
import { TabBar } from 'antd-mobile'
import {
  AppOutline,
  UnorderedListOutline,
  UserOutline,
} from 'antd-mobile-icons'
import {
  withRouter
} from 'react-router-dom'

class MyTabbar extends Component {
  state = {
    tabbar: [
      {
        key: '/home/homes',
        title: '店铺',
        icon: <AppOutline />,
      },
      {
        key: '/home/todo',
        title: '分类',
        icon: <UnorderedListOutline />,
      },
      {
        key: '/home/message',
        title: '全部商品',
        icon: <UnorderedListOutline />,
      },
      {
        key: '/home/personalCenter',
        title: '购物车',
        icon: <UserOutline />,
      },
      {
        key: '/home/main',
        title: '个人中心',
        icon: <UserOutline />,
      },
    ]
  }
  setRouteActive = (value) => {
    // console.log(this.props.history);
    this.props.history.push(value)
  }
  render() {
    return (
      <div className='tabber' >
        <TabBar onChange={this.setRouteActive}>
          {this.state.tabbar.map(item => (
            <TabBar.Item key={item.key} icon={item.icon} title={item.title}
              defaultActiveKey={item.key} />
          ))}
        </TabBar>
      </div>
    );
  }
}

export default withRouter(MyTabbar);